<script setup lang="ts">
import { placeholderImages } from '../../assets/images/placeholder.ts'
import { useRouter } from 'vue-router'
//搜索
const router = useRouter()
const goSearch = (keyword: string) => {
  if (!keyword) return
  router.push({
    name: 'SearchResults',
    query: { keyword }
  })
}

// 商品卡片数据
const productCards = [
  {
    title: '品质家居',
    subtitle: '超值优惠',
    image: placeholderImages.products[0],
    bgColor: '#f8a45f',
  },
  {
    title: '精致美妆',
    subtitle: '品质之选',
    image: placeholderImages.products[1],
    bgColor: '#f48fb1'
  },
  {
    title: '品质五金',
    subtitle: '超值特惠',
    image: placeholderImages.products[2],
    bgColor: '#ffa726'
  },
  {
    title: '超值百货',
    subtitle: '省钱省心',
    image: placeholderImages.products[3],
    bgColor: '#4fc3f7'
  }
]
</script>
<template>
  <div class="product-cards">
    <div 
      v-for="(card, index) in productCards" 
      :key="index" 
      class="product-card"
      :style="{ backgroundColor: card.bgColor }"
      @click="goSearch(card.title)"
    >
      <div class="card-content">
          <div class="img-wrap" :style="{ backgroundImage: `url(${card.image})` }"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.product-cards {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  height: 100%;
  
  .product-card {
    border-radius: 0.5rem;
    color: white;
    overflow: hidden;
    height: 5.625rem;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.1);
    flex: 1;
    
    &:hover {
      transform: translateY(-0.1875rem);
    }
    
    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      width: 100%;
      .img-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; // 添加overflow hidden确保图片不会超出容器
        background-position: center; // 改为center确保图片居中
        background-size: cover; // 确保图片完全覆盖整个区域
        width: 100%; // 宽度100%填满整个容器
        height: 100%; // 高度100%填满整个容器
       
        }
    }
  }
}
</style>
